<template>
  <div ref="chartDiv" :style="currStyle"></div>
</template>

<script setup>
import {ref, watch, onMounted, nextTick, markRaw} from 'vue';
import * as echarts from "echarts";
import visual from "@/visual/js/visual";
import * as chart from "@/visual/js/echarts";
import JSON5 from 'json5';
import { parseColors } from "@/utils/color";

const props = defineProps({
  node: Object,
  compStyle: Object,
  compData: Object
});
const currNode = ref(props.node);
const chartDiv = ref();
const currChart = ref(null);
const currStyle = ref();

const init = async() => {
  if (currNode.value.compData.dataSourceType === '') {
    currNode.value.compData.dataSourceType = '静态数据';
  }
  const compStyle = props.compStyle || {};
  let style = '';
  style += visual.parseTpl('width: {value};', compStyle['width']);
  style += visual.parseTpl('height: {value};', compStyle['height']);
  currStyle.value = style;

  let defaultOption = {};
  try {
    defaultOption = JSON5.parse(compStyle['jsonOption'] || '{}');
  } catch (e) {
    console.log("jsonOption解释出错", e)
  }
  const dataList = (await visual.loadData(props.compData, {}, {}, currNode.value)).data || [];
  currNode.value.compData.dataList = JSON.stringify(dataList);

  const indicatorData = [];
  const legendData = [];
  const seriesData = [];
  const maxField = (compStyle.seriesList || []).find(item => item.dataType === 'maxValue');
  (compStyle.seriesList || []).forEach(item => {
    if (item.dataType === 'label') {
      for (let i=0; i<dataList.length; i++) {
        indicatorData.push({
          name: dataList[i][item.prop],
          max: maxField && maxField.prop && dataList[i][maxField.prop] || 100
        });
      }
    } else if (item.dataType === 'series') {
      const fieldData = [];

      for (let i=0; i<dataList.length; i++) {
        fieldData[i] = dataList[i][item.prop];
      }

      legendData.push(item.name);
      seriesData.push({
        name: item.name,
        data: [{
          name: item.name,
          value: fieldData
        }],
        ...parseRadar(compStyle)
      });
    }
  });

  const option = {
    animation: compStyle['animation'] || false,
    color: parseColors(compStyle['colorScheme']),
    title: chart.parseTitle(compStyle),
    legend: chart.parseLegend(compStyle, legendData),
    radar: {
      ...parseRadar(compStyle),
      indicator: indicatorData
    },
    series: seriesData,
    toolbox: chart.parseToolbox(compStyle)
  };

  await nextTick(() => {
    try {
      if (currChart.value) {
        echarts.dispose(chartDiv.value);
      }
      currChart.value = markRaw(echarts.init(chartDiv.value));
      currChart.value.setOption(Object.assign({}, option, defaultOption));
    } catch (e) {
      console.log(e);
    }
  });
  await nextTick(() => currChart.value.resize());
};

const parseRadar = (compStyle) => {
  const result = { type: 'radar' };

  result['radius'] = compStyle['series.radius'] || '75%';
  result['symbol'] = compStyle['series.symbol'] || 'none';
  result['symbolSize'] = compStyle['series.symbolSize'] || 4;
  if (compStyle['series.area']) {
    result['areaStyle'] = {
      opacity: compStyle['series.area.opacity']
    };
  }

  result['axisName'] = {
    show: !!compStyle['series.axisName'],
    color: compStyle['series.axisName.color'] || '#333'
  };

  result['axisLine'] = {
    show: !!compStyle['series.axisLine'],
    lineStyle: {
      color: compStyle['series.axisLine.color'] || '#ccc'
    }
  };

  result['splitLine'] = {
    show: !!compStyle['series.splitLine'],
    lineStyle: {
      color: compStyle['series.splitLine.color'] || '#ccc'
    }
  };

  return result;
};

watch(() => props.compStyle, () => {
  init();
}, { deep: true });

watch(() => props.compData?.refresh, () => {
  init();
});

onMounted(() => {
  init();
});
</script>